<template>
  <div class="app-container">
    <!-- 过滤容器 -->
    <div class="filter-container">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :default-time="['00:00:00', '23:59:59']"
        class="filter-item"
        style="width: 260px;"
        @change="handleDateChange"
        @input="handleDateInput"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-document" @click="exportExcel">
        导出Excel
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-warning" @click="handleUnprocessedOrders">
        未处理订单
      </el-button>
    </div>

    <!-- 汇总卡片区域 -->
    <div class="summary-panel">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-id">
          <i class="el-icon-s-custom card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">改码数量总和</div>
          <span class="card-panel-num">{{ animatedIdCount }}</span>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-yamato">
          <i class="el-icon-money card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">黑猫运费总和</div>
          <span class="card-panel-num">{{ animatedYamatoTotal }}</span>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-sagawa">
          <i class="el-icon-money card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">佐川运费总和</div>
          <span class="card-panel-num">{{ animatedSagawaTotal }}</span>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-diff">
          <i class="el-icon-s-flag card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">运费差值</div>
          <span class="card-panel-num">{{ animatedFreightDiff }}</span>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-ship">
          <i class="el-icon-s-promotion card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">发货合计</div>
          <div class="card-panel-details">
            <div class="detail-row">
              <span class="detail-label">单数：</span>
              <span class="detail-value">{{ animatedShipmentOrderCount }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">箱数：</span>
              <span class="detail-value">{{ animatedShipmentBoxCount }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-receive">
          <i class="el-icon-s-goods card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">收货合计</div>
          <div class="card-panel-details">
            <div class="detail-row">
              <span class="detail-label">单数：</span>
              <span class="detail-value">{{ animatedReceiveOrderCount }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">箱数：</span>
              <span class="detail-value">{{ animatedReceiveBoxCount }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-total">
          <i class="el-icon-s-operation card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">收发货合计</div>
          <div class="card-panel-details">
            <div class="detail-row">
              <span class="detail-label">单数：</span>
              <span class="detail-value">{{ animatedShipReceiveOrderCount }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">箱数：</span>
              <span class="detail-value">{{ animatedShipReceiveBoxCount }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-qa">
          <i class="el-icon-chat-dot-round card-panel-icon"></i>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">订单问答合计</div>
          <div class="card-panel-details">
            <div class="detail-row">
              <span class="detail-label">9:30-10:00：</span>
              <span class="detail-value">{{ (order_qa_orders['09:30-10:00'] && order_qa_orders['09:30-10:00'].count) || 0 }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">11:30-12:00：</span>
              <span class="detail-value">{{ (order_qa_orders['11:30-12:00'] && order_qa_orders['11:30-12:00'].count) || 0 }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">13:30-14:00：</span>
              <span class="detail-value">{{ (order_qa_orders['13:30-14:00'] && order_qa_orders['13:30-14:00'].count) || 0 }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">15:30-16:00：</span>
              <span class="detail-value">{{ (order_qa_orders['15:30-16:00'] && order_qa_orders['15:30-16:00'].count) || 0 }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">17:30-18:00：</span>
              <span class="detail-value">{{ (order_qa_orders['17:30-18:00'] && order_qa_orders['17:30-18:00'].count) || 0 }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">总计：</span>
              <span class="detail-value">{{ animatedOrderQATotal }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据展示区域 -->
    <div class="data-container">
      <div class="data-grid">
        <div v-for="item in orderCardList" :key="item.key" class="data-card" @click="handleCardClick(item.key)">
          <div class="card-header">
            <div class="card-icon">
              <i :class="item.icon"></i>
            </div>
            <div class="card-title">
              <h3>{{ item.title }}</h3>
              <div class="card-subtitle">点击查看详情</div>
            </div>
          </div>
          
          <div class="card-body">
            <template v-if="item.type === 'local'">
              <div class="stat-section">
                <div class="stat-item primary">
                  <div class="stat-header">
                    <i class="el-icon-s-order"></i>
                    <span class="stat-label">常规订单</span>
                  </div>
                  <div class="stat-value">{{ local_orders.regular_total && local_orders.regular_total.local_order_count_total != null ? local_orders.regular_total.local_order_count_total : 0 }}</div>
                  <div class="stat-details">
                    <span class="detail-item">
                      <i class="el-icon-box"></i>
                      箱数：{{ local_orders.regular_total && local_orders.regular_total.local_order_box_count_total != null ? local_orders.regular_total.local_order_box_count_total : 0 }}
                    </span>
                  </div>
                </div>
                
                <div class="stat-item secondary">
                  <div class="stat-header">
                    <i class="el-icon-edit"></i>
                    <span class="stat-label">改码单</span>
                  </div>
                  <div class="stat-value">{{ local_orders.change_code && local_orders.change_code.is_changecode_count != null ? local_orders.change_code.is_changecode_count : 0 }}</div>
                  <div class="stat-details">
                    <span class="detail-item">
                      <i class="el-icon-box"></i>
                      箱数：{{ local_orders.change_code && local_orders.change_code.changecode_box_count != null ? local_orders.change_code.changecode_box_count : 0 }}
                    </span>
                    <span class="detail-item">
                      <i class="el-icon-s-custom"></i>
                      数量：{{ local_orders.change_code && local_orders.change_code.changecode_id_count != null ? local_orders.change_code.changecode_id_count : 0 }}
                    </span>
                  </div>
                </div>
                
                <div class="stat-item tertiary">
                  <div class="stat-header">
                    <i class="el-icon-location"></i>
                    <span class="stat-label">自提单</span>
                  </div>
                  <div class="stat-value">{{ local_orders.pickup && local_orders.pickup.is_pickup_count != null ? local_orders.pickup.is_pickup_count : 0 }}</div>
                  <div class="stat-details">
                    <span class="detail-item">
                      <i class="el-icon-box"></i>
                      箱数：{{ local_orders.pickup && local_orders.pickup.is_pickup_box_count != null ? local_orders.pickup.is_pickup_box_count : 0 }}
                    </span>
                  </div>
                </div>
              </div>
            </template>
            
            <template v-else-if="item.type === 'transfer'">
              <div class="stat-section">
                <div class="stat-item primary">
                  <div class="stat-header">
                    <i class="el-icon-truck"></i>
                    <span class="stat-label">常规订单</span>
                  </div>
                  <div class="stat-value">{{ transfer_orders.regular_total && transfer_orders.regular_total.transfer_order_count_total != null ? transfer_orders.regular_total.transfer_order_count_total : 0 }}</div>
                  <div class="stat-details">
                    <span class="detail-item">
                      <i class="el-icon-box"></i>
                      箱数：{{ transfer_orders.regular_total && transfer_orders.regular_total.transfer_order_box_count_total != null ? transfer_orders.regular_total.transfer_order_box_count_total : 0 }}
                    </span>
                  </div>
                </div>
                
                <div class="stat-item secondary">
                  <div class="stat-header">
                    <i class="el-icon-location"></i>
                    <span class="stat-label">自提单</span>
                  </div>
                  <div class="stat-value">{{ transfer_orders.pickup && transfer_orders.pickup.is_pickup_count != null ? transfer_orders.pickup.is_pickup_count : 0 }}</div>
                  <div class="stat-details">
                    <span class="detail-item">
                      <i class="el-icon-box"></i>
                      箱数：{{ transfer_orders.pickup && transfer_orders.pickup.is_pickup_box_count != null ? transfer_orders.pickup.is_pickup_box_count : 0 }}
                    </span>
                  </div>
                </div>
              </div>
            </template>
            
            <template v-else>
              <div class="stat-section">
                <div class="stat-item primary">
                  <div class="stat-header">
                    <i class="el-icon-s-order"></i>
                    <span class="stat-label">总单数</span>
                  </div>
                  <div class="stat-value">{{ item.data && item.data.count != null ? item.data.count : 0 }}</div>
                  <div class="stat-details">
                    <span class="detail-item">
                      <i class="el-icon-box"></i>
                      箱数：{{ item.data && item.data.box != null ? item.data.box : 0 }}
                    </span>
                    <template v-if="['return','repair','relocation','cross','aftersale'].includes(item.key)">
                      <span class="detail-item">
                        <i class="el-icon-s-custom"></i>
                        数量：{{ item.data && item.data.id != null ? item.data.id : 0 }}
                      </span>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </div>
          
          <div class="card-footer">
            <div class="view-more">
              <span>查看详情</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 未处理订单统计区域 -->
    <el-card v-if="unprocessedOrdersData || unprocessedDataLoading" class="unprocessed-statistics-card">
      <div slot="header" class="card-header">
        <div class="header-content">
          <div class="title-section">
            <i class="el-icon-warning warning-icon"></i>
            <span class="title-text">未处理订单统计</span>
          </div>
          <div class="header-actions">
            <div class="date-range-info">
              <i class="el-icon-date"></i>
              <span>{{ getUnprocessedDateDisplay() }}</span>
            </div>
            <el-button 
              type="text" 
              class="collapse-btn"
              @click="toggleUnprocessedCard"
              :class="{ 'collapsed': !unprocessedCardExpanded }"
            >
              <i class="el-icon-arrow-down"></i>
            </el-button>
          </div>
        </div>
      </div>
      
      <div v-show="unprocessedCardExpanded">
        <div v-if="unprocessedDataLoading" class="loading-container">
          <div class="loading-spinner">
            <i class="el-icon-loading"></i>
          </div>
          <span class="loading-text">正在加载未处理订单数据...</span>
        </div>
        
        <div v-else-if="unprocessedOrdersData" class="unprocessed-data-display">
          <div v-for="(dayData, date) in unprocessedOrdersData" :key="date" class="day-data">
            <div class="day-header">
              <i class="el-icon-date day-icon"></i>
              <h4>{{ date }} 未处理订单统计</h4>
              <div class="day-summary">
                <span class="summary-item">
                  <i class="el-icon-s-order"></i>
                  总计: {{ getDayTotal(dayData) }}
                </span>
              </div>
            </div>
            <div class="time-sections">
              <div class="time-section sent-before-16">
                <div class="section-header">
                  <i class="el-icon-time time-icon"></i>
                  <h5>16:00前未发出/入库单数</h5>
                  <span class="section-total">{{ getSectionTotal(dayData.sentBefore16) }}</span>
                </div>
                <div class="order-counts">
                  <div class="count-item">
                    <i class="el-icon-s-order"></i>
                    <span class="label">本地单:</span>
                    <span class="value">{{ (dayData.sentBefore16 && dayData.sentBefore16.localOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-s-promotion"></i>
                    <span class="label">转运单:</span>
                    <span class="value">{{ (dayData.sentBefore16 && dayData.sentBefore16.transferOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-edit"></i>
                    <span class="label">改码单:</span>
                    <span class="value">{{ (dayData.sentBefore16 && dayData.sentBefore16.changeCodeOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-refresh"></i>
                    <span class="label">退换货:</span>
                    <span class="value">{{ (dayData.sentBefore16 && dayData.sentBefore16.aftersaleOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-s-operation"></i>
                    <span class="label">调仓单:</span>
                    <span class="value">{{ (dayData.sentBefore16 && dayData.sentBefore16.adjustOrder) || 0 }}</span>
                  </div>
                </div>
              </div>
              <div class="time-section unsent-16-17">
                <div class="section-header">
                  <i class="el-icon-time time-icon"></i>
                  <h5>16:00-17:00未发出/入库单数</h5>
                  <span class="section-total">{{ getSectionTotal(dayData.unsentBetween16And17) }}</span>
                </div>
                <div class="order-counts">
                  <div class="count-item">
                    <i class="el-icon-s-order"></i>
                    <span class="label">本地单:</span>
                    <span class="value">{{ (dayData.unsentBetween16And17 && dayData.unsentBetween16And17.localOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-s-promotion"></i>
                    <span class="label">转运单:</span>
                    <span class="value">{{ (dayData.unsentBetween16And17 && dayData.unsentBetween16And17.transferOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-edit"></i>
                    <span class="label">改码单:</span>
                    <span class="value">{{ (dayData.unsentBetween16And17 && dayData.unsentBetween16And17.changeCodeOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-refresh"></i>
                    <span class="label">退换货:</span>
                    <span class="value">{{ (dayData.unsentBetween16And17 && dayData.unsentBetween16And17.aftersaleOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-s-operation"></i>
                    <span class="label">调仓单:</span>
                    <span class="value">{{ (dayData.unsentBetween16And17 && dayData.unsentBetween16And17.adjustOrder) || 0 }}</span>
                  </div>
                </div>
              </div>
              <div class="time-section unsent-17-18">
                <div class="section-header">
                  <i class="el-icon-time time-icon"></i>
                  <h5>17:00-18:30未发出/入库单数</h5>
                  <span class="section-total">{{ getSectionTotal(dayData.unsentBetween17And18) }}</span>
                </div>
                <div class="order-counts">
                  <div class="count-item">
                    <i class="el-icon-s-order"></i>
                    <span class="label">本地单:</span>
                    <span class="value">{{ (dayData.unsentBetween17And18 && dayData.unsentBetween17And18.localOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-s-promotion"></i>
                    <span class="label">转运单:</span>
                    <span class="value">{{ (dayData.unsentBetween17And18 && dayData.unsentBetween17And18.transferOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-edit"></i>
                    <span class="label">改码单:</span>
                    <span class="value">{{ (dayData.unsentBetween17And18 && dayData.unsentBetween17And18.changeCodeOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-refresh"></i>
                    <span class="label">退换货:</span>
                    <span class="value">{{ (dayData.unsentBetween17And18 && dayData.unsentBetween17And18.aftersaleOrder) || 0 }}</span>
                  </div>
                  <div class="count-item">
                    <i class="el-icon-s-operation"></i>
                    <span class="label">调仓单:</span>
                    <span class="value">{{ (dayData.unsentBetween17And18 && dayData.unsentBetween17And18.adjustOrder) || 0 }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <div>
      <!-- 数据可视化区域 -->
      <div class="chart-container">
        <div ref="orderChart" style="width: 100%;height:400px;"></div>
      </div>
      <!-- 环形图区域 -->
      <div class="pie-chart-container">
        <div ref="pieChart" style="width: 100%;height:400px;"></div>
      </div>
      <!-- 折线图区域 -->
      <div class="line-chart-container">
        <div ref="lineChart" style="width: 100%;height:400px;"></div>
      </div>
      <!-- 堆叠柱状图区域 -->
      <div class="stack-bar-chart-container">
        <div ref="stackBarChart" style="width: 100%;height:400px;"></div>
      </div>
      <!-- 仪表盘区域 -->
      <div class="gauge-chart-container">
        <div class="gauge-header">
          <span>发货目标：</span>
          <el-input-number v-model="gaugeTarget" :min="1" :max="100000" :step="1" size="small" style="width:120px;" @change="setGaugeOption" />
          <span style="margin-left:8px;">单</span>
        </div>
        <div ref="gaugeChart" style="width: 100%;height:300px;"></div>
      </div>
      <!-- 双轴图区域 -->
      <div class="dual-axis-chart-container">
        <div ref="dualAxisChart" style="width: 100%;height:400px;"></div>
      </div>
      <!-- 面积图区域 -->
      <div class="area-chart-container">
        <div ref="areaChart" style="width: 100%;height:400px;"></div>
      </div>
      <!-- 雷达图区域 -->
      <div class="radar-chart-container">
        <div ref="radarChart" style="width: 100%;height:400px;"></div>
      </div>
    </div>

    <!-- 运费价格表格区域 -->
    <el-card class="fee-price-card" style="margin-top: 30px;">
      <div slot="header" class="clearfix">
        <span class="card-title">
          <i class="el-icon-money"></i>
          运费价格表
        </span>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text"
          @click="refreshFeeData"
        >
          <i class="el-icon-refresh"></i>
          刷新
        </el-button>
      </div>
      
      <div v-if="feeData && feeData.length > 0" class="fee-table-container">
        <!-- 按物流公司分组显示 -->
        <div v-for="carrier in groupedFeeData" :key="carrier.carrier" class="carrier-section">
          <div class="carrier-header" @click="toggleCarrier(carrier.carrier)">
            <div class="carrier-info">
              <i :class="carrier.carrier === 'YAMATO' ? 'el-icon-s-order' : 'el-icon-s-custom'"></i>
              <span class="carrier-name">{{ carrier.carrier_display }}</span>
              <el-tag 
                :type="carrier.carrier === 'YAMATO' ? 'primary' : 'success'" 
                size="small"
              >
                {{ carrier.carrier === 'YAMATO' ? '黑猫' : '佐川' }}
              </el-tag>
            </div>
            <div class="carrier-actions">
              <span class="record-count">{{ carrier.data.length }}条记录</span>
              <i class="collapse-icon" :class="collapsedCarriers.includes(carrier.carrier) ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
            </div>
          </div>
          
          <div v-show="!collapsedCarriers.includes(carrier.carrier)" class="carrier-content">
            <el-table 
              :data="getCarrierTableData(carrier.data)" 
              border 
              fit
              highlight-current-row
              class="custom-table fee-table"
              style="width: 100%;"
            >
              <el-table-column prop="volume" label="体积(cm³)/地区" align="center" min-width="150">
                <template slot-scope="scope">
                  <span class="volume-text">{{ scope.row.volume }}</span>
                </template>
              </el-table-column>
              <el-table-column 
                v-for="region in getCarrierRegions(carrier.data)" 
                :key="region" 
                :prop="region" 
                :label="region" 
                align="center" 
                min-width="120"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row[region]" class="price-text">¥{{ scope.row[region] }}</span>
                  <span v-else class="no-price">-</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      
      <div v-else-if="feeDataLoading" class="loading-container">
        <i class="el-icon-loading"></i>
        <span>正在加载运费数据...</span>
      </div>
      
      <div v-else class="empty-container">
        <i class="el-icon-warning"></i>
        <span>暂无运费数据</span>
      </div>
    </el-card>
    
    <!-- 未处理订单弹窗 -->
    <el-dialog
      title="未处理订单统计"
      :visible.sync="unprocessedDialogVisible"
      width="800px"
      :before-close="() => unprocessedDialogVisible = false"
    >
      <el-form :model="unprocessedForm" label-width="120px">
        <!-- 统计日期 -->
        <el-form-item label="统计日期" required>
          <el-date-picker
            v-model="unprocessedForm.statistics_date"
            type="date"
            placeholder="选择统计日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleUnprocessedDateChange"
            style="width: 100%"
          />
          <div class="form-tip">
            <i class="el-icon-info"></i> 选择要统计的日期，默认为今天
          </div>
        </el-form-item>

        <!-- 16:00前未发出/入库单数 -->
        <div class="statistics-section">
          <div class="section-header" @click="toggleUnprocessedSection('sentBefore16')">
            <i class="section-icon el-icon-time"></i>
            <span class="section-title">16:00前未发出/入库单数</span>
            <i class="collapse-icon" :class="unprocessedSections.sentBefore16 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </div>
          <div class="section-content" v-show="unprocessedSections.sentBefore16">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="本地单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.sentBefore16.localOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="转运单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.sentBefore16.transferOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="改码单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.sentBefore16.changeCodeOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="退换货" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.sentBefore16.aftersaleOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="调仓单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.sentBefore16.adjustOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 16:00-17:00未发出/入库单数 -->
        <div class="statistics-section">
          <div class="section-header" @click="toggleUnprocessedSection('unsentBetween16And17')">
            <i class="section-icon el-icon-time"></i>
            <span class="section-title">16:00-17:00未发出/入库单数</span>
            <i class="collapse-icon" :class="unprocessedSections.unsentBetween16And17 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </div>
          <div class="section-content" v-show="unprocessedSections.unsentBetween16And17">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="本地单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween16And17.localOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="转运单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween16And17.transferOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="改码单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween16And17.changeCodeOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="退换货" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween16And17.aftersaleOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="调仓单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween16And17.adjustOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 17:00-18:30未发出/入库单数 -->
        <div class="statistics-section">
          <div class="section-header" @click="toggleUnprocessedSection('unsentBetween17And18')">
            <i class="section-icon el-icon-time"></i>
            <span class="section-title">17:00-18:30未发出/入库单数</span>
            <i class="collapse-icon" :class="unprocessedSections.unsentBetween17And18 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </div>
          <div class="section-content" v-show="unprocessedSections.unsentBetween17And18">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="本地单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween17And18.localOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="转运单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween17And18.transferOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="改码单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween17And18.changeCodeOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="退换货" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween17And18.aftersaleOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="调仓单" class="order-input-item">
                  <el-input-number 
                    v-model="unprocessedForm.unsentBetween17And18.adjustOrder" 
                    :min="0" 
                    controls-position="right"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="unprocessedDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUnprocessedOrders">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchReport, exportExcel, fetchReportDaily, fetchFee, handleUnprocessedOrders, fetchUnprocessedOrders } from '@/api/shipping'
import echarts from 'echarts'

const cardRouteMap = {
  local: '/shipping/local',
  transfer: '/shipping/transfer',
  aftersale: '/shipping/aftersale',
  cross: '/shipping/cross',
  relocation: '/shipping/relocation',
  exchange: '/shipping/return',
  repair: '/shipping/repair',
  return: '/shipping/return',
  inventory_receive: '/shipping/inventory-receive'
}

export default {
  name: 'Report',
  data() {
    // 获取今天的日期，使用统一的格式化方法
    const today = new Date()
    const todayStr = today.getFullYear() + '-' + 
                    String(today.getMonth() + 1).padStart(2, '0') + '-' + 
                    String(today.getDate()).padStart(2, '0')
    
    return {
      dateRange: [todayStr, todayStr],
      start_date: todayStr,
      end_date: todayStr,
      local_orders: {},
      transfer_orders: {},
      aftersale_orders: {},
      cross_orders: {},
      relocation_orders: {},
      exchange_orders: {},
      repair_orders: {},
      return_orders: {},
      inventory_receive_orders: {},
      order_qa_orders: {},
      orderCardList: [
        { key: 'local', title: '本地单统计', icon: 'el-icon-s-order', type: 'local' },
        { key: 'transfer', title: '转运单统计', icon: 'el-icon-truck', type: 'transfer' },
        { key: 'aftersale', title: '退换货单统计', icon: 'el-icon-service', type: 'other', dataKey: 'aftersale_orders' },
        { key: 'cross', title: '跨仓单统计', icon: 'el-icon-s-promotion', type: 'other', dataKey: 'cross_orders' },
        { key: 'relocation', title: '调仓单统计', icon: 'el-icon-s-operation', type: 'other', dataKey: 'relocation_orders' },
        { key: 'repair', title: '回国维修单收货统计', icon: 'el-icon-s-tools', type: 'other', dataKey: 'repair_orders' },
        { key: 'return', title: '包裹回国单统计', icon: 'el-icon-s-home', type: 'other', dataKey: 'return_orders' },
        { key: 'inventory_receive', title: '库存收货单统计', icon: 'el-icon-box', type: 'other', dataKey: 'inventory_receive_orders' },
      ],
      animatedIdCount: 0,
      dailyData: [],
      gaugeTarget: 100,
      animatedYamatoTotal: 0,
      animatedSagawaTotal: 0,
      animatedFreightDiff: 0,
      animatedShipmentOrderCount: 0,
      animatedShipmentBoxCount: 0,
      animatedReceiveOrderCount: 0,
      animatedReceiveBoxCount: 0,
      animatedShipReceiveOrderCount: 0,
      animatedShipReceiveBoxCount: 0,
      animatedOrderQATotal: 0,
      feeData: null,
      feeDataLoading: false,
      groupedFeeData: [],
      carrierList: [],
      regionList: [],
      unprocessedDialogVisible: false, // 新增：未处理订单弹窗可见性
      // 未处理订单数据
      unprocessedOrdersData: null,
      unprocessedDataLoading: false,
      unprocessedForm: {
        statistics_date: '',
        sentBefore16: {
          localOrder: 0, transferOrder: 0, changeCodeOrder: 0,
          aftersaleOrder: 0, adjustOrder: 0
        },
        unsentBetween16And17: {
          localOrder: 0, transferOrder: 0, changeCodeOrder: 0,
          aftersaleOrder: 0, adjustOrder: 0
        },
        unsentBetween17And18: {
          localOrder: 0, transferOrder: 0, changeCodeOrder: 0,
          aftersaleOrder: 0, adjustOrder: 0
        }
      },
      unprocessedSections: {
        sentBefore16: true,
        unsentBetween16And17: true,
        unsentBetween17And18: true
      },
      unprocessedCardExpanded: false,
      collapsedCarriers: ['YAMATO', 'SAGAWA'] // 默认折叠所有物流公司
    }
  },
  created() {
    const saved = localStorage.getItem('reportGaugeTarget')
    if (saved !== null) {
      this.gaugeTarget = Number(saved)
    }
  },
  async mounted() {
    this.getReport()
    this.getReportDaily()
    await this.fetchFeeData()
    await this.fetchUnprocessedOrdersData()
    this.$nextTick(() => {
      this.initChart()
      this.initPieChart()
      this.initLineChart()
      this.initStackBarChart()
      this.initGaugeChart()
      this.initDualAxisChart()
      this.initAreaChart()
      this.initRadarChart()
    })
    this.animateAll()
  },
  watch: {
    totalIdCount(val) {
      this.animateNumber('animatedIdCount', val)
    },
    yamatoTotal(val) {
      this.animateNumber('animatedYamatoTotal', val)
    },
    sagawaTotal(val) {
      this.animateNumber('animatedSagawaTotal', val)
    },
    freightDiff(val) {
      this.animateNumber('animatedFreightDiff', val)
    },
    shipmentOrderCount(val) {
      this.animateNumber('animatedShipmentOrderCount', val)
    },
    shipmentBoxCount(val) {
      this.animateNumber('animatedShipmentBoxCount', val)
    },
    receiveOrderCount(val) {
      this.animateNumber('animatedReceiveOrderCount', val)
    },
    receiveBoxCount(val) {
      this.animateNumber('animatedReceiveBoxCount', val)
    },
    shipReceiveOrderCount(val) {
      this.animateNumber('animatedShipReceiveOrderCount', val)
    },
    shipReceiveBoxCount(val) {
      this.animateNumber('animatedShipReceiveBoxCount', val)
    },
    orderQATotal(val) {
      this.animateNumber('animatedOrderQATotal', val)
    },
    gaugeTarget(newVal) {
      localStorage.setItem('reportGaugeTarget', newVal)
    },
    // 监听dateRange变化，确保同步到start_date和end_date
    dateRange(newVal, oldVal) {
      if (newVal && newVal.length === 2) {
        this.start_date = newVal[0]
        this.end_date = newVal[1]
      }
    }
  },
  methods: {
    animateAll() {
      this.animateNumber('animatedIdCount', this.totalIdCount)
      this.animateNumber('animatedYamatoTotal', this.yamatoTotal)
      this.animateNumber('animatedSagawaTotal', this.sagawaTotal)
      this.animateNumber('animatedFreightDiff', this.freightDiff)
      this.animateNumber('animatedShipmentOrderCount', this.shipmentOrderCount)
      this.animateNumber('animatedShipmentBoxCount', this.shipmentBoxCount)
      this.animateNumber('animatedReceiveOrderCount', this.receiveOrderCount)
      this.animateNumber('animatedReceiveBoxCount', this.receiveBoxCount)
      this.animateNumber('animatedShipReceiveOrderCount', this.shipReceiveOrderCount)
      this.animateNumber('animatedShipReceiveBoxCount', this.shipReceiveBoxCount)
    },
    animateNumber(key, target) {
      const duration = 800
      const frameRate = 30
      const start = this[key] || 0
      const diff = target - start
      if (diff === 0) return
      let frame = 0
      const totalFrames = Math.round(duration / (1000 / frameRate))
      const animate = () => {
        frame++
        this[key] = Math.round(start + (diff * frame) / totalFrames)
        if (frame < totalFrames) {
          requestAnimationFrame(animate)
        } else {
          this[key] = target
        }
      }
      animate()
    },
    // 日期选择器
    handleDateChange(val) {
      if (val && val.length === 2) {
        // 同时更新dateRange和start_date、end_date，确保数据同步
        this.dateRange = val
        this.start_date = val[0]
        this.end_date = val[1]
        // 日期改变时自动刷新数据
        this.handleSearch()
      } else {
        // 如果没有选择日期或清空，使用今天的日期
        const today = new Date()
        const todayStr = today.getFullYear() + '-' + 
                        String(today.getMonth() + 1).padStart(2, '0') + '-' + 
                        String(today.getDate()).padStart(2, '0')
        this.dateRange = [todayStr, todayStr]
        this.start_date = todayStr
        this.end_date = todayStr
        // 重新获取数据
        this.handleSearch()
      }
    },
    // 日期输入事件（Element UI的input事件）
    handleDateInput(val) {
      // 使用相同的逻辑处理日期输入
      this.handleDateChange(val)
    },
    // 获取报表数据
    async getReport() {
      const res = await fetchReport({
        start_date: this.start_date,
        end_date: this.end_date
      })
      this.local_orders = res.data.local_orders
      this.transfer_orders = res.data.transfer_orders
      this.aftersale_orders = res.data.aftersale_orders
      this.cross_orders = res.data.cross_orders
      this.relocation_orders = res.data.relocation_orders
      // API返回的数据中没有exchange_orders字段，使用空对象避免undefined错误
      this.exchange_orders = res.data.exchange_orders || {}
      this.repair_orders = res.data.repair_orders
      this.return_orders = res.data.return_orders
      this.inventory_receive_orders = res.data.inventory_receive_orders
      this.order_qa_orders = res.data.order_qa_orders || {}
      // 组装other类型卡片的数据
      this.orderCardList.forEach(card => {
        if (card.type === 'other') {
          const d = this[card.dataKey] || {}
          card.data = {
            count: d[Object.keys(d)[0]] ?? 0,
            box: d[Object.keys(d)[1]] ?? 0,
            id: d[Object.keys(d)[2]] ?? 0
          }
        }
      })
      this.$nextTick(() => {
        if (this.chart) this.setChartOption()
        if (this.pieChart) this.setPieOption()
      })
    },
    // 获取每日报表数据
    async getReportDaily() {
      const res = await fetchReportDaily({
        start_date: this.start_date,
        end_date: this.end_date
      })
      this.dailyData = Array.isArray(res.data) ? res.data : []
      this.$nextTick(() => {
        if (this.lineChart) this.setLineOption()
        if (this.stackBarChart) this.setStackBarOption()
        if (this.gaugeChart) this.setGaugeOption()
        if (this.dualAxisChart) this.setDualAxisOption()
        if (this.areaChart) this.setAreaOption()
        if (this.radarChart) this.setRadarOption()
      })
    },
    // 导出Excel
    async exportExcel() {
      const res = await exportExcel({
        start_date: this.start_date,
        end_date: this.end_date
      })
      const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `报表_${this.start_date}_${this.end_date}.xlsx`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
    },
    // 点击卡片跳转
    handleCardClick(key) {
      const path = cardRouteMap[key]
      if (path) this.$router.push(path)
    },
    // 图表初始化
    initChart() {
      if (!this.$refs.orderChart) return
      this.chart = echarts.init(this.$refs.orderChart)
      this.setChartOption()
      window.addEventListener('resize', this.chart.resize)
    },
    setChartOption() {
      // 改码单、自提单、本地单、转运单、其他订单类型
      const changecode = this.local_orders.change_code && this.local_orders.change_code.is_changecode_count != null ? this.local_orders.change_code.is_changecode_count : 0
      const pickup = (this.local_orders.pickup && this.local_orders.pickup.is_pickup_count != null ? this.local_orders.pickup.is_pickup_count : 0) +
        (this.transfer_orders.pickup && this.transfer_orders.pickup.is_pickup_count != null ? this.transfer_orders.pickup.is_pickup_count : 0)
      const localRegular = this.local_orders.regular_total && this.local_orders.regular_total.local_order_count_total != null ? this.local_orders.regular_total.local_order_count_total : 0
      const transferRegular = this.transfer_orders.regular_total && this.transfer_orders.regular_total.transfer_order_count_total != null ? this.transfer_orders.regular_total.transfer_order_count_total : 0
      const aftersale = this.aftersale_orders && this.aftersale_orders.aftersale_order_count_total != null ? this.aftersale_orders.aftersale_order_count_total : 0
      const cross = this.cross_orders && this.cross_orders.cross_order_count_total != null ? this.cross_orders.cross_order_count_total : 0
      const relocation = this.relocation_orders && this.relocation_orders.relocation_order_count_total != null ? this.relocation_orders.relocation_order_count_total : 0
      const repair = this.repair_orders && this.repair_orders.repair_order_count_total != null ? this.repair_orders.repair_order_count_total : 0
      const ret = this.return_orders && this.return_orders.return_order_count_total != null ? this.return_orders.return_order_count_total : 0
      const inventoryReceive = this.inventory_receive_orders && this.inventory_receive_orders.inventory_receive_order_count_total != null ? this.inventory_receive_orders.inventory_receive_order_count_total : 0
      this.chart.setOption({
        title: {
          text: '各类型订单单数统计',
          left: 'center',
          top: 10
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['改码单', '自提单', '本地单', '转运单', '售后单', '跨仓单', '调仓单', '维修单', '回国单', '库存收获单']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '单数',
          type: 'bar',
          data: [changecode, pickup, localRegular, transferRegular, aftersale, cross, relocation, repair, ret, inventoryReceive],
          itemStyle: {
            color: function(params) {
              const colors = ['#F56C6C', '#67C23A', '#409EFF', '#36CBCB', '#E6A23C', '#909399', '#FFB800', '#8D4EDA', '#2EC7C9', '#B6A2DE']
              return colors[params.dataIndex] || '#409EFF'
            }
          },
          barWidth: 50
        }]
      })
    },
    // 环形图初始化
    initPieChart() {
      if (!this.$refs.pieChart) return
      this.pieChart = echarts.init(this.$refs.pieChart)
      this.setPieOption()
      window.addEventListener('resize', this.pieChart.resize)
    },
    setPieOption() {
      // 汇总各类型订单的单数
      const pieData = [
        { name: '本地常规单', value: this.local_orders.regular_total && this.local_orders.regular_total.local_order_count_total ? this.local_orders.regular_total.local_order_count_total : 0 },
        { name: '本地改码单', value: this.local_orders.change_code && this.local_orders.change_code.is_changecode_count ? this.local_orders.change_code.is_changecode_count : 0 },
        { name: '本地自提单', value: this.local_orders.pickup && this.local_orders.pickup.is_pickup_count ? this.local_orders.pickup.is_pickup_count : 0 },
        { name: '转运常规单', value: this.transfer_orders.regular_total && this.transfer_orders.regular_total.transfer_order_count_total ? this.transfer_orders.regular_total.transfer_order_count_total : 0 },
        { name: '转运自提单', value: this.transfer_orders.pickup && this.transfer_orders.pickup.is_pickup_count ? this.transfer_orders.pickup.is_pickup_count : 0 },
        { name: '售后单', value: this.aftersale_orders && this.aftersale_orders.aftersale_order_count_total ? this.aftersale_orders.aftersale_order_count_total : 0 },
        { name: '跨仓单', value: this.cross_orders && this.cross_orders.cross_order_count_total ? this.cross_orders.cross_order_count_total : 0 },
        { name: '调仓单', value: this.relocation_orders && this.relocation_orders.relocation_order_count_total ? this.relocation_orders.relocation_order_count_total : 0 },
        { name: '退换货单', value: this.exchange_orders && this.exchange_orders.exchange_order_count_total ? this.exchange_orders.exchange_order_count_total : 0 },
        { name: '维修单', value: this.repair_orders && this.repair_orders.repair_order_count_total ? this.repair_orders.repair_order_count_total : 0 },
        { name: '回国单', value: this.return_orders && this.return_orders.return_order_count_total ? this.return_orders.return_order_count_total : 0 },
        { name: '库存收货单', value: this.inventory_receive_orders && this.inventory_receive_orders.inventory_receive_order_count_total ? this.inventory_receive_orders.inventory_receive_order_count_total : 0 },
      ].filter(d => d.value > 0)
      this.pieChart.setOption({
        title: {
          text: '各订单类型占比',
          left: 'center',
          top: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          top: 60
        },
        series: [
          {
            name: '订单类型',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{d}%'
            },
            labelLine: {
              show: true
            },
            data: pieData
          }
        ]
      })
    },
    // 折线图初始化
    initLineChart() {
      if (!this.$refs.lineChart) return
      this.lineChart = echarts.init(this.$refs.lineChart)
      this.setLineOption()
      window.addEventListener('resize', this.lineChart.resize)
    },
    setLineOption() {
      // 用dailyData渲染
      const xData = this.dailyData.map(d => d.date)
      const yData = this.dailyData.map(d => {
        let sum = 0
        if (d.local_orders && d.local_orders.orders_count) sum += d.local_orders.orders_count
        if (d.transfer_orders && d.transfer_orders.orders_count) sum += d.transfer_orders.orders_count
        if (d.aftersale_orders && d.aftersale_orders.orders_count) sum += d.aftersale_orders.orders_count
        if (d.relocation_orders && d.relocation_orders.orders_count) sum += d.relocation_orders.orders_count
        if (d.cross_orders && d.cross_orders.orders_count) sum += d.cross_orders.orders_count
        if (d.return_orders && d.return_orders.orders_count) sum += d.return_orders.orders_count
        if (d.exchange_orders && d.exchange_orders.orders_count) sum += d.exchange_orders.orders_count
        if (d.repair_orders && d.repair_orders.orders_count) sum += d.repair_orders.orders_count
        return sum
      })
      this.lineChart.setOption({
        title: {
          text: '订单数量随时间变化趋势',
          left: 'center',
          top: 10
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '订单总数',
          type: 'line',
          data: yData,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { color: '#409EFF', width: 3 },
          itemStyle: { color: '#409EFF' },
          areaStyle: { color: 'rgba(64,158,255,0.15)' }
        }]
      })
    },
    // 堆叠柱状图初始化
    initStackBarChart() {
      if (!this.$refs.stackBarChart) return
      this.stackBarChart = echarts.init(this.$refs.stackBarChart)
      this.setStackBarOption()
      window.addEventListener('resize', this.stackBarChart.resize)
    },
    setStackBarOption() {
      const xData = this.dailyData.map(d => d.date)
      // 各类型订单数据
      const localData = this.dailyData.map(d => d.local_orders && d.local_orders.orders_count ? d.local_orders.orders_count : 0)
      const transferData = this.dailyData.map(d => d.transfer_orders && d.transfer_orders.orders_count ? d.transfer_orders.orders_count : 0)
      const aftersaleData = this.dailyData.map(d => d.aftersale_orders && d.aftersale_orders.orders_count ? d.aftersale_orders.orders_count : 0)
      const relocationData = this.dailyData.map(d => d.relocation_orders && d.relocation_orders.orders_count ? d.relocation_orders.orders_count : 0)
      const crossData = this.dailyData.map(d => d.cross_orders && d.cross_orders.orders_count ? d.cross_orders.orders_count : 0)
      const returnData = this.dailyData.map(d => d.return_orders && d.return_orders.orders_count ? d.return_orders.orders_count : 0)
      const exchangeData = this.dailyData.map(d => d.exchange_orders && d.exchange_orders.orders_count ? d.exchange_orders.orders_count : 0)
      const repairData = this.dailyData.map(d => d.repair_orders && d.repair_orders.orders_count ? d.repair_orders.orders_count : 0)
      const inventoryReceiveData = this.dailyData.map(d => d.inventory_receive_orders && d.inventory_receive_orders.orders_count ? d.inventory_receive_orders.orders_count : 0)
      this.stackBarChart.setOption({
        title: {
          text: '各类订单每日堆叠统计',
          left: 'center',
          top: 10
        },
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { top: 40 },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value' },
        series: [
          { name: '本地单', type: 'bar', stack: 'orders', data: localData, itemStyle: { color: '#409EFF' }},
          { name: '转运单', type: 'bar', stack: 'orders', data: transferData, itemStyle: { color: '#67C23A' }},
          { name: '售后单', type: 'bar', stack: 'orders', data: aftersaleData, itemStyle: { color: '#E6A23C' }},
          { name: '调仓单', type: 'bar', stack: 'orders', data: relocationData, itemStyle: { color: '#36CBCB' }},
          { name: '跨仓单', type: 'bar', stack: 'orders', data: crossData, itemStyle: { color: '#909399' }},
          { name: '库存收获单', type: 'bar', stack: 'orders', data: inventoryReceiveData, itemStyle: { color: '#FFB800' }},
          { name: '维修单', type: 'bar', stack: 'orders', data: repairData, itemStyle: { color: '#8D4EDA' }},
          { name: '回国单', type: 'bar', stack: 'orders', data: returnData, itemStyle: { color: '#2EC7C9' }}
        ]
      })
    },
    // 仪表盘
    initGaugeChart() {
      if (!this.$refs.gaugeChart) return
      this.gaugeChart = echarts.init(this.$refs.gaugeChart)
      this.setGaugeOption()
      window.addEventListener('resize', this.gaugeChart.resize)
    },
    setGaugeOption() {
      // 目标100单，实际为所有orders_count之和
      const total = this.dailyData.reduce((sum, d) => {
        let s = 0
        if (d.local_orders && d.local_orders.orders_count) s += d.local_orders.orders_count
        if (d.transfer_orders && d.transfer_orders.orders_count) s += d.transfer_orders.orders_count
        if (d.aftersale_orders && d.aftersale_orders.orders_count) s += d.aftersale_orders.orders_count
        if (d.relocation_orders && d.relocation_orders.orders_count) s += d.relocation_orders.orders_count
        if (d.cross_orders && d.cross_orders.orders_count) s += d.cross_orders.orders_count
        if (d.return_orders && d.return_orders.orders_count) s += d.return_orders.orders_count
        if (d.exchange_orders && d.exchange_orders.orders_count) s += d.exchange_orders.orders_count
        if (d.repair_orders && d.repair_orders.orders_count) s += d.repair_orders.orders_count
        if (d.inventory_receive_orders && d.inventory_receive_orders.orders_count) s += d.inventory_receive_orders.orders_count
        return sum + s
      }, 0)
      const target = this.gaugeTarget > 0 ? this.gaugeTarget : 1
      const percent = Math.round((total / target) * 100)
      this.gaugeChart.setOption({
        title: { text: '发货目标完成率', left: 'center', top: 10 },
        series: [{
          type: 'gauge',
          progress: { show: true, width: 18 },
          axisLine: { lineStyle: { width: 18 }},
          axisTick: { show: false },
          splitLine: { length: 15, lineStyle: { width: 2 }},
          axisLabel: { distance: 25, fontSize: 14 },
          pointer: { width: 6, length: '70%' },
          detail: { valueAnimation: true, fontSize: 32, formatter: '{value}%'},
          data: [{ value: percent }]
        }]
      })
    },
    // 双轴图
    initDualAxisChart() {
      if (!this.$refs.dualAxisChart) return
      this.dualAxisChart = echarts.init(this.$refs.dualAxisChart)
      this.setDualAxisOption()
      window.addEventListener('resize', this.dualAxisChart.resize)
    },
    setDualAxisOption() {
      const xData = this.dailyData.map(d => d.date)
      const orderData = this.dailyData.map(d => {
        let sum = 0
        if (d.local_orders && d.local_orders.orders_count) sum += d.local_orders.orders_count
        if (d.transfer_orders && d.transfer_orders.orders_count) sum += d.transfer_orders.orders_count
        if (d.aftersale_orders && d.aftersale_orders.orders_count) sum += d.aftersale_orders.orders_count
        if (d.relocation_orders && d.relocation_orders.orders_count) sum += d.relocation_orders.orders_count
        if (d.cross_orders && d.cross_orders.orders_count) sum += d.cross_orders.orders_count
        if (d.return_orders && d.return_orders.orders_count) sum += d.return_orders.orders_count
        if (d.exchange_orders && d.exchange_orders.orders_count) sum += d.exchange_orders.orders_count
        if (d.repair_orders && d.repair_orders.orders_count) sum += d.repair_orders.orders_count
        if (d.inventory_receive_orders && d.inventory_receive_orders.orders_count) sum += d.inventory_receive_orders.orders_count
        return sum
      })
      const boxData = this.dailyData.map(d => {
        let sum = 0
        if (d.local_orders && d.local_orders.box_count) sum += d.local_orders.box_count
        if (d.transfer_orders && d.transfer_orders.box_count) sum += d.transfer_orders.box_count
        if (d.aftersale_orders && d.aftersale_orders.box_count) sum += d.aftersale_orders.box_count
        if (d.relocation_orders && d.relocation_orders.box_count) sum += d.relocation_orders.box_count
        if (d.cross_orders && d.cross_orders.box_count) sum += d.cross_orders.box_count
        if (d.return_orders && d.return_orders.box_count) sum += d.return_orders.box_count
        if (d.exchange_orders && d.exchange_orders.box_count) sum += d.exchange_orders.box_count
        if (d.repair_orders && d.repair_orders.box_count) sum += d.repair_orders.box_count
        if (d.inventory_receive_orders && d.inventory_receive_orders.box_count) sum += d.inventory_receive_orders.box_count
        return sum
      })
      this.dualAxisChart.setOption({
        title: { text: '单数与箱数趋势对比', left: 'center', top: 10 },
        tooltip: { trigger: 'axis' },
        legend: { data: ['单数', '箱数'], top: 40 },
        xAxis: { type: 'category', data: xData },
        yAxis: [
          { type: 'value', name: '单数' },
          { type: 'value', name: '箱数' }
        ],
        series: [
          { name: '单数', type: 'bar', data: orderData, yAxisIndex: 0, itemStyle: { color: '#409EFF' }},
          { name: '箱数', type: 'line', data: boxData, yAxisIndex: 1, itemStyle: { color: '#E6A23C' }, smooth: true, lineStyle: { width: 3 }}
        ]
      })
    },
    // 面积图
    initAreaChart() {
      if (!this.$refs.areaChart) return
      this.areaChart = echarts.init(this.$refs.areaChart)
      this.setAreaOption()
      window.addEventListener('resize', this.areaChart.resize)
    },
    setAreaOption() {
      const xData = this.dailyData.map(d => d.date)
      let sum = 0
      const yData = this.dailyData.map(d => {
        let day = 0
        if (d.local_orders && d.local_orders.orders_count) day += d.local_orders.orders_count
        if (d.transfer_orders && d.transfer_orders.orders_count) day += d.transfer_orders.orders_count
        if (d.aftersale_orders && d.aftersale_orders.orders_count) day += d.aftersale_orders.orders_count
        if (d.relocation_orders && d.relocation_orders.orders_count) day += d.relocation_orders.orders_count
        if (d.cross_orders && d.cross_orders.orders_count) day += d.cross_orders.orders_count
        if (d.return_orders && d.return_orders.orders_count) day += d.return_orders.orders_count
        if (d.exchange_orders && d.exchange_orders.orders_count) day += d.exchange_orders.orders_count
        if (d.repair_orders && d.repair_orders.orders_count) day += d.repair_orders.orders_count
        if (d.inventory_receive_orders && d.inventory_receive_orders.orders_count) day += d.inventory_receive_orders.orders_count
        sum += day
        return sum
      })
      this.areaChart.setOption({
        title: { text: '累计发货量随时间变化', left: 'center', top: 10 },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value' },
        series: [{
          name: '累计单数',
          type: 'line',
          data: yData,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { color: '#67C23A', width: 3 },
          itemStyle: { color: '#67C23A' },
          areaStyle: { color: 'rgba(103,194,58,0.15)' }
        }]
      })
    },
    // 雷达图
    initRadarChart() {
      if (!this.$refs.radarChart) return
      this.radarChart = echarts.init(this.$refs.radarChart)
      this.setRadarOption()
      window.addEventListener('resize', this.radarChart.resize)
    },
    setRadarOption() {
      // 统计各类型订单的单数、箱数、数量
      const types = [
        { key: 'local_orders', name: '本地单' },
        { key: 'transfer_orders', name: '转运单' },
        { key: 'aftersale_orders', name: '售后单' },
        { key: 'relocation_orders', name: '调仓单' },
        { key: 'cross_orders', name: '跨仓单' },
        { key: 'repair_orders', name: '维修单' },
        { key: 'return_orders', name: '回国单' },
        { key: 'inventory_receive_orders', name: '库存收货单' },
      ]
      // 汇总所有天的数据
      const sumByType = types.map(t => {
        let order = 0
        let box = 0
        let id = 0
        this.dailyData.forEach(d => {
          if (d[t.key]) {
            if (d[t.key].orders_count) order += d[t.key].orders_count
            if (d[t.key].box_count) box += d[t.key].box_count
            if (d[t.key].id_count) id += d[t.key].id_count
          }
        })
        return { name: t.name, value: [order, box, id] }
      })
      this.radarChart.setOption({
        title: { text: '各类型订单单数/箱数/数量对比', left: 'center', top: 10 },
        tooltip: {},
        legend: { data: sumByType.map(t => t.name), top: 40 },
        radar: {
          indicator: [
            { name: '单数', max: Math.max(...sumByType.map(t => t.value[0]), 10) },
            { name: '箱数', max: Math.max(...sumByType.map(t => t.value[1]), 10) },
            { name: '数量', max: Math.max(...sumByType.map(t => t.value[2]), 10) }
          ],
          radius: 100
        },
        series: sumByType.map((t, idx) => ({
          name: t.name,
          type: 'radar',
          data: [{ value: t.value, name: t.name }],
          areaStyle: { opacity: 0.1 },
          lineStyle: { width: 2 },
          symbol: 'circle',
          symbolSize: 6
        }))
      })
    },
    handleSearch() {
      this.getReport()
      this.getReportDaily && this.getReportDaily()
      // 重新获取未处理订单数据
      this.fetchUnprocessedOrdersData()
    },
    async fetchFeeData() {
      try {
        this.feeDataLoading = true
        const res = await fetchFee()
        if (res.code === 200 && res.data) {
          this.feeData = res.data
          // 处理新的API返回格式
          this.processFeeData(res.data)
        } else {
          this.feeData = null
          this.groupedFeeData = []
        }
      } catch (e) {
        console.error('获取运费数据失败:', e)
        this.feeData = null
        this.groupedFeeData = []
      } finally {
        this.feeDataLoading = false
      }
    },
    
    // 处理运费数据
    processFeeData(data) {
      if (!Array.isArray(data)) {
        this.groupedFeeData = []
        return
      }
      
      // 按物流公司分组
      const grouped = {}
      
      data.forEach(item => {
        const carrier = item.carrier
        if (!grouped[carrier]) {
          grouped[carrier] = {
            carrier: carrier,
            carrier_display: item.carrier_display,
            data: []
          }
        }
        grouped[carrier].data.push(item)
      })
      
      // 转换为数组格式
      this.groupedFeeData = Object.values(grouped)
      
      // 按体积排序
      this.groupedFeeData.forEach(carrier => {
        carrier.data.sort((a, b) => a.volume - b.volume)
      })
    },
    
    // 刷新运费数据
    async refreshFeeData() {
      await this.fetchFeeData()
      this.$message.success('运费数据已刷新')
    },
    // 处理未处理订单按钮点击
    handleUnprocessedOrders() {
      // 设置默认日期为今天
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      this.unprocessedForm.statistics_date = `${year}-${month}-${day}`;
      
      // 加载现有数据
      this.loadExistingUnprocessedData(this.unprocessedForm.statistics_date);
      
      // 打开弹窗
      this.unprocessedDialogVisible = true;
    },
    
    // 加载已有的未处理订单数据到表单
    async loadExistingUnprocessedData(date) {
      try {
        const params = {
          start_date: date,
          end_date: date
        };
        
        const response = await fetchUnprocessedOrders(params);
        
        if (response.code === 200 && response.data) {
          // 获取指定日期的数据
          const dateKey = date;
          const dayData = response.data[dateKey];
          
          if (dayData) {
            // 填充表单
            this.unprocessedForm.sentBefore16 = { ...dayData.sentBefore16 };
            this.unprocessedForm.unsentBetween16And17 = { ...dayData.unsentBetween16And17 };
            this.unprocessedForm.unsentBetween17And18 = { ...dayData.unsentBetween17And18 };
            // this.$message.success('已加载现有数据');
          } else {
            // 没有数据，重置表单
            this.resetUnprocessedForm();
            this.$message.info('该日期暂无数据，请填写新数据');
          }
        } else {
          this.resetUnprocessedForm();
          this.$message.info('该日期暂无数据，请填写新数据');
        }
      } catch (error) {
        this.resetUnprocessedForm();
        this.$message.error('加载数据失败: ' + error.message);
      }
    },
    
    // 重置未处理订单表单
    resetUnprocessedForm() {
      this.unprocessedForm.sentBefore16 = {
        localOrder: 0, transferOrder: 0, changeCodeOrder: 0,
        aftersaleOrder: 0, adjustOrder: 0
      };
      this.unprocessedForm.unsentBetween16And17 = {
        localOrder: 0, transferOrder: 0, changeCodeOrder: 0,
        aftersaleOrder: 0, adjustOrder: 0
      };
      this.unprocessedForm.unsentBetween17And18 = {
        localOrder: 0, transferOrder: 0, changeCodeOrder: 0,
        aftersaleOrder: 0, adjustOrder: 0
      };
    },
    // 获取未处理订单数据
    async fetchUnprocessedOrdersData() {
      try {
        this.unprocessedDataLoading = true;
        const params = {
          start_date: this.start_date,
          end_date: this.end_date
        };
        
        const response = await fetchUnprocessedOrders(params);
        
        if (response.code === 200) {
          this.unprocessedOrdersData = response.data;
        } else {
          this.$message.error(response.message || '获取未处理订单数据失败');
        }
      } catch (error) {
        this.$message.error('获取未处理订单数据失败: ' + error.message);
      } finally {
        this.unprocessedDataLoading = false;
      }
    },
    // 提交未处理订单数据
    async submitUnprocessedOrders() {
      try {
        const data = {
          statistics_date: this.unprocessedForm.statistics_date,
          sentBefore16: this.unprocessedForm.sentBefore16,
          unsentBetween16And17: this.unprocessedForm.unsentBetween16And17,
          unsentBetween17And18: this.unprocessedForm.unsentBetween17And18
        };
        
        const response = await handleUnprocessedOrders(data);
        
        if (response.code === 200) {
          this.$message.success(response.message || '未处理订单数据保存成功');
          this.unprocessedDialogVisible = false;
          // 重新获取数据
          await this.fetchUnprocessedOrdersData();
        } else {
          this.$message.error(response.message || '保存失败');
        }
      } catch (error) {
        this.$message.error('保存未处理订单数据失败: ' + error.message);
      }
    },
    // 切换未处理订单板块展开/收起
    toggleUnprocessedSection(sectionName) {
      this.unprocessedSections[sectionName] = !this.unprocessedSections[sectionName];
    },
    // 格式化日期范围显示
    formatDateRange(startDate, endDate) {
      if (!startDate || !endDate) {
        return ''
      }
      
      // 如果开始日期和结束日期相同，只显示一个日期
      if (startDate === endDate) {
        return startDate
      }
      
      // 如果是不同日期，显示范围
      return `${startDate} 至 ${endDate}`
    },
    // 处理未处理订单日期变化
    handleUnprocessedDateChange(value) {
      if (value) {
        this.loadExistingUnprocessedData(value);
      }
    },
    // 获取未处理订单日期显示
    getUnprocessedDateDisplay() {
      if (this.unprocessedOrdersData) {
        const dates = Object.keys(this.unprocessedOrdersData);
        if (dates.length === 1) {
          return dates[0];
        } else if (dates.length > 1) {
          return `${dates[0]} 至 ${dates[dates.length - 1]}`;
        }
      }
      return this.formatDateRange(this.start_date, this.end_date);
    },
    getDayTotal(dayData) {
      if (!dayData) return 0;
      
      const getSubTotal = (section) => {
        if (!section) return 0;
        return (section.localOrder || 0) + (section.transferOrder || 0) + (section.changeCodeOrder || 0) + 
               (section.aftersaleOrder || 0) + (section.adjustOrder || 0);
      };
      
      return getSubTotal(dayData.sentBefore16) + 
             getSubTotal(dayData.unsentBetween16And17) + 
             getSubTotal(dayData.unsentBetween17And18);
    },
    getSectionTotal(section) {
      if (!section) return 0;
      return (section.localOrder || 0) + (section.transferOrder || 0) + (section.changeCodeOrder || 0) + 
             (section.aftersaleOrder || 0) + (section.adjustOrder || 0);
    },
    toggleUnprocessedCard() {
      this.unprocessedCardExpanded = !this.unprocessedCardExpanded;
    },
    toggleCarrier(carrier) {
      const index = this.collapsedCarriers.indexOf(carrier);
      if (index > -1) {
        this.collapsedCarriers.splice(index, 1);
      } else {
        this.collapsedCarriers.push(carrier);
      }
    },
    getCarrierTableData(data) {
      // 按体积分组
      const volumeGroups = {}
      
      data.forEach(item => {
        const volume = item.volume
        const region = item.region
        const price = item.price
        
        if (!volumeGroups[volume]) {
          volumeGroups[volume] = {
            volume: volume
          }
        }
        
        volumeGroups[volume][region] = price
      })
      
      // 转换为数组并按体积排序
      return Object.values(volumeGroups).sort((a, b) => a.volume - b.volume)
    },
    
    getCarrierRegions(data) {
      // 获取所有唯一的地区
      const regions = new Set()
      data.forEach(item => {
        regions.add(item.region)
      })
      return Array.from(regions).sort()
    }
  },
  computed: {
    totalIdCount() {
      // 本地单只有改码单有数量
      const local = this.local_orders
      const localChange = local.change_code && local.change_code.changecode_id_count ? local.change_code.changecode_id_count : 0
      // 其它类型
      const aftersale = this.aftersale_orders && this.aftersale_orders.aftersale_order_id_count_total ? this.aftersale_orders.aftersale_order_id_count_total : 0
      const cross = this.cross_orders && this.cross_orders.cross_order_id_count_total ? this.cross_orders.cross_order_id_count_total : 0
      const relocation = this.relocation_orders && this.relocation_orders.relocation_order_id_count_total ? this.relocation_orders.relocation_order_id_count_total : 0
      const exchange = 0 // this.exchange_orders && this.exchange_orders.exchange_order_id_count_total ? this.exchange_orders.exchange_order_id_count_total : 0
      const repair = this.repair_orders && this.repair_orders.repair_order_id_count_total ? this.repair_orders.repair_order_id_count_total : 0
      const ret = this.return_orders && this.return_orders.return_order_id_count_total ? this.return_orders.return_order_id_count_total : 0
      return localChange + aftersale + cross + relocation + exchange + repair + ret
    },
    yamatoTotal() {
      const local = this.local_orders.price || {}
      const transfer = this.transfer_orders.price || {}
      const localYamato = local.local_order_yamato_price_total || 0
      const transferYamato = transfer.transfer_order_yamato_price_total || 0
      return localYamato + transferYamato
    },
    sagawaTotal() {
      const local = this.local_orders.price || {}
      const transfer = this.transfer_orders.price || {}
      const localSagawa = local.local_order_sagawa_price_total || 0
      const transferSagawa = transfer.transfer_order_sagawa_price_total || 0
      return localSagawa + transferSagawa
    },
    freightDiff() {
      return Math.abs(this.yamatoTotal - this.sagawaTotal)
    },
    // 发货合计单数：本地常规单 + 改码单 + 转运单 + 跨仓单 + 包裹回国
    shipmentOrderCount() {
      const local = this.local_orders
      const localRegular = local.regular_total && local.regular_total.local_order_count_total ? local.regular_total.local_order_count_total : 0
      const localChange = local.change_code && local.change_code.is_changecode_count ? local.change_code.is_changecode_count : 0
      const transfer = this.transfer_orders
      const transferRegular = transfer.regular_total && transfer.regular_total.transfer_order_count_total ? transfer.regular_total.transfer_order_count_total : 0
      const cross = this.cross_orders && this.cross_orders.cross_order_count_total ? this.cross_orders.cross_order_count_total : 0
      const ret = this.return_orders && this.return_orders.return_order_count_total ? this.return_orders.return_order_count_total : 0
      return localRegular + localChange + transferRegular + cross + ret
    },
    // 发货合计箱数
    shipmentBoxCount() {
      const local = this.local_orders
      const localRegular = local.regular_total && local.regular_total.local_order_box_count_total ? local.regular_total.local_order_box_count_total : 0
      const localChange = local.change_code && local.change_code.changecode_box_count ? local.change_code.changecode_box_count : 0
      const transfer = this.transfer_orders
      const transferRegular = transfer.regular_total && transfer.regular_total.transfer_order_box_count_total ? transfer.regular_total.transfer_order_box_count_total : 0
      const cross = this.cross_orders && this.cross_orders.cross_order_box_count_total ? this.cross_orders.cross_order_box_count_total : 0
      const ret = this.return_orders && this.return_orders.return_order_box_count_total ? this.return_orders.return_order_box_count_total : 0
      return localRegular + localChange + transferRegular + cross + ret
    },
    // 收货合计单数：调仓单 + 退换货 + 库存收货 + 回国维修收货
    receiveOrderCount() {
      const relocation = this.relocation_orders && this.relocation_orders.relocation_order_count_total ? this.relocation_orders.relocation_order_count_total : 0
      const aftersale = this.aftersale_orders && this.aftersale_orders.aftersale_order_count_total ? this.aftersale_orders.aftersale_order_count_total : 0
      const inventory = this.inventory_receive_orders && this.inventory_receive_orders.inventory_receive_order_count_total ? this.inventory_receive_orders.inventory_receive_order_count_total : 0
      const repair = this.repair_orders && this.repair_orders.repair_order_count_total ? this.repair_orders.repair_order_count_total : 0
      return relocation + aftersale + inventory + repair
    },
    // 收货合计箱数
    receiveBoxCount() {
      const relocation = this.relocation_orders && this.relocation_orders.relocation_order_box_count_total ? this.relocation_orders.relocation_order_box_count_total : 0
      const aftersale = this.aftersale_orders && this.aftersale_orders.aftersale_order_box_count_total ? this.aftersale_orders.aftersale_order_box_count_total : 0
      const inventory = this.inventory_receive_orders && this.inventory_receive_orders.inventory_receive_order_box_count_total ? this.inventory_receive_orders.inventory_receive_order_box_count_total : 0
      const repair = this.repair_orders && this.repair_orders.repair_order_box_count_total ? this.repair_orders.repair_order_box_count_total : 0
      return relocation + aftersale + inventory + repair
    },
    // 收发货合计单数：发货合计 + 收货合计
    shipReceiveOrderCount() {
      return this.shipmentOrderCount + this.receiveOrderCount
    },
    // 收发货合计箱数：发货合计 + 收货合计
    shipReceiveBoxCount() {
      return this.shipmentBoxCount + this.receiveBoxCount
    },
    // 订单问答总计
    orderQATotal() {
      return this.order_qa_orders.total_count || 0
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/dialog-common.scss';
@import '@/styles/shipping-common.scss';

.app-container {
  padding: 20px;
}

.filter-container {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  .filter-item {
    margin-right: 10px;
    margin-bottom: 0;
  }
}

.data-container {
  margin-top: 20px;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.data-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 16px;
    pointer-events: none;
  }

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(102, 126, 234, 0.25);

    .card-header .card-icon {
      transform: scale(1.1) rotate(5deg);
    }

    .card-footer .view-more {
      transform: translateX(8px);
    }
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;

    .card-icon {
      width: 56px;
      height: 56px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);

      i {
        font-size: 24px;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
    }

    .card-title {
      font-size: 18px;
      font-weight: 700;
      color: #2c3e50;
      display: flex;
      align-items: center;
      gap: 8px;
      
      i {
        color: #667eea;
        font-size: 20px;
      }
    }

    .card-subtitle {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 400;
    }
  }

  .card-body {
    position: relative;
    z-index: 1;

    .stat-section {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .stat-item {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        padding: 16px;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);

        &:hover {
          transform: translateX(4px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }

        &.primary {
          border-left: 4px solid #667eea;
        }

        &.secondary {
          border-left: 4px solid #feca57;
        }

        &.tertiary {
          border-left: 4px solid #48dbfb;
        }

        &.quaternary {
          border-left: 4px solid #ff6b6b;
        }

        .stat-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;

          i {
            font-size: 16px;
            color: #667eea;
          }

          .stat-label {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
          }
        }

        .stat-value {
          font-size: 28px;
          font-weight: 700;
          color: #2c3e50;
          margin-bottom: 8px;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .stat-details {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;

          .detail-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #606266;
            padding: 4px 8px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 6px;

            i {
              font-size: 12px;
              color: #667eea;
            }
          }
        }
      }
    }
  }

  .card-footer {
    margin-top: 20px;
    position: relative;
    z-index: 1;

    .view-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      color: white;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);

      i {
        font-size: 14px;
        transition: transform 0.3s ease;
      }
    }
  }
}

/* 图表容器样式 */
.chart-container,
.pie-chart-container,
.line-chart-container,
.stack-bar-chart-container,
.gauge-chart-container,
.dual-axis-chart-container,
.area-chart-container,
.radar-chart-container {
  margin-top: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
  padding: 24px;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    z-index: 0;
  }

  > div {
    position: relative;
    z-index: 1;
  }
}

.gauge-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  position: relative;
  z-index: 1;
}

/* 汇总面板样式 */
.summary-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;

  .card-panel {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      pointer-events: none;
    }

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25);

      .card-panel-icon-wrapper {
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.3);
      }
    }

    .card-panel-icon-wrapper {
      margin-right: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);

      .card-panel-icon {
        font-size: 24px;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
    }

    .card-panel-description {
      flex: 1;
      position: relative;
      z-index: 1;

      .card-panel-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 8px;
        font-weight: 500;
      }

      .card-panel-num {
        font-size: 28px;
        font-weight: 700;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
    }
  }

  // 新卡片样式
  .icon-ship {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .icon-receive {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  .icon-total {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  .icon-qa {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  }

  // 新卡片详情样式
  .card-panel-details {
    margin-top: 8px;
    
    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      
      .detail-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
      }
      
      .detail-value {
        font-size: 16px;
        font-weight: 700;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

/* 未处理订单统计卡片样式 */
.unprocessed-statistics-card {
  margin-top: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
  }

  .el-card__header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 24px;
  }

  .card-header {
    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;

      .title-section {
        display: flex;
        align-items: center;
        gap: 12px;

        .warning-icon {
          font-size: 20px;
          color: #ff6b6b;
          animation: pulse 2s infinite;
        }

        .title-text {
          font-size: 18px;
          font-weight: 700;
          color: #2c3e50;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;

        .date-range-info {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 20px;
          color: white;
          font-size: 14px;
          font-weight: 500;
          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

          i {
            font-size: 16px;
          }
        }

        .collapse-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid rgba(102, 126, 234, 0.2);
          border-radius: 50%;
          color: #667eea;
          font-size: 16px;
          transition: all 0.3s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

          &:hover {
            background: #667eea;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
          }

          &.collapsed {
            transform: rotate(180deg);
          }

          i {
            transition: transform 0.3s ease;
          }
        }
      }
    }
  }

  .el-card__body {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 24px;
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;

    i {
      font-size: 32px;
      color: #667eea;
      animation: spin 1s linear infinite;
    }

    span {
      font-size: 16px;
      color: #606266;
      font-weight: 500;
    }
  }

  .unprocessed-data-display {
    .day-data {
      margin-bottom: 24px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.8);

      .day-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.2);

        .day-icon {
          font-size: 20px;
          color: #667eea;
          margin-right: 12px;
        }

        h4 {
          font-size: 18px;
          color: #2c3e50;
          margin: 0;
          font-weight: 700;
          flex: 1;
        }

        .day-summary {
          .summary-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            color: white;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

            i {
              font-size: 16px;
            }
          }
        }
      }

      .time-sections {
        display: grid;
        gap: 16px;

        .time-section {
          background: white;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
          }

          &.sent-before-16 {
            border-left: 4px solid #ff6b6b;
          }

          &.unsent-16-17 {
            border-left: 4px solid #feca57;
          }

          &.unsent-17-18 {
            border-left: 4px solid #48dbfb;
          }

          .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 1px solid #e9ecef;

            .time-icon {
              font-size: 18px;
              color: #667eea;
              margin-right: 12px;
            }

            h5 {
              font-size: 16px;
              color: #2c3e50;
              margin: 0;
              font-weight: 600;
              flex: 1;
            }

            .section-total {
              padding: 6px 12px;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border-radius: 16px;
              color: white;
              font-weight: 700;
              font-size: 14px;
              box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
            }
          }

          .order-counts {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;

            .count-item {
              display: flex;
              align-items: center;
              gap: 12px;
              padding: 12px 16px;
              background: #f8f9fa;
              border-radius: 8px;
              transition: all 0.3s ease;

              &:hover {
                background: #e9ecef;
                transform: translateX(4px);
              }

              i {
                font-size: 16px;
                color: #667eea;
                width: 20px;
                text-align: center;
              }

              .label {
                font-size: 14px;
                color: #606266;
                font-weight: 500;
                flex: 1;
              }

              .value {
                font-size: 16px;
                font-weight: 700;
                color: #2c3e50;
                min-width: 30px;
                text-align: right;
                padding: 4px 8px;
                background: white;
                border-radius: 6px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
              }
            }
          }
        }
      }
    }
  }
}

/* 动画效果 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 订单输入项样式 */
.order-input-item {
  .el-form-item__label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
  }
  
  .el-input-number {
    width: 100%;
    
    .el-input__inner {
      border-radius: 6px;
      transition: all 0.3s ease;
      text-align: center;
      font-weight: 500;
      
      &:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
      }
    }
    
    .el-input-number__decrease,
    .el-input-number__increase {
      background-color: #f5f7fa;
      border-color: #dcdfe6;
      color: #606266;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #667eea;
        border-color: #667eea;
        color: #fff;
      }
      
      &.is-disabled {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #c0c4cc;
      }
    }
  }
}

/* 未处理订单统计对话框样式 */
::v-deep .el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
  border: none;
  
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.1);
      pointer-events: none;
    }
    
    .el-dialog__title {
      color: white;
      font-size: 18px;
      font-weight: 700;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      
      &::before {
        content: '📊';
        font-size: 20px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
      }
    }
    
    .el-dialog__headerbtn {
      position: relative;
      z-index: 1;
      top: 24px;
      right: 30px;
      
      .el-dialog__close {
        color: white;
        font-size: 18px;
        transition: all 0.3s ease;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        
        &:hover {
          color: #ffd700;
          transform: scale(1.1) rotate(90deg);
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
  
  .el-dialog__body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
    
    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 8px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(102, 126, 234, 0.1);
      border-radius: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 4px;
      
      &:hover {
        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
      }
    }
  }
  
  .el-dialog__footer {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 30px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    backdrop-filter: blur(10px);
    
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      
      .el-button {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &.el-button--default {
          background: rgba(102, 126, 234, 0.1);
          border: 1px solid rgba(102, 126, 234, 0.2);
          color: #667eea;
          
          &:hover {
            background: rgba(102, 126, 234, 0.2);
            border-color: #667eea;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
          }
        }
        
        &.el-button--primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          color: white;
          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
          }
        }
      }
    }
  }
}

/* 表单样式现代化 */
::v-deep .el-form {
  .el-form-item {
    margin-bottom: 24px;
    
    .el-form-item__label {
      font-weight: 600;
      color: #2c3e50;
      font-size: 14px;
    }
    
    .el-form-item__content {
      .el-date-editor {
        .el-input__inner {
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(10px);
          
          &:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
            background: white;
          }
          
          &:hover {
            border-color: #667eea;
            background: white;
          }
        }
      }
    }
  }
}

/* 表单提示样式 */
.form-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 6px;
  border-left: 3px solid #667eea;
  
  .el-icon-info {
    color: #667eea;
    font-size: 14px;
  }
}

/* 统计板块样式 */
.statistics-section {
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  &:hover {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
  }
}

.section-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
  }
  
  &:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    transform: scale(1.02);
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.section-icon {
  font-size: 18px;
  margin-right: 12px;
  color: #ffd700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.collapse-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
  
  &.el-icon-arrow-down {
    transform: rotate(0deg);
  }
  
  &.el-icon-arrow-up {
    transform: rotate(180deg);
  }
}

.section-content {
  padding: 20px;
  background: #fafafa;
  border-top: 1px solid #e4e7ed;
  
  .el-form-item {
    margin-bottom: 18px;
    
    .el-form-item__label {
      font-weight: 500;
      color: #333;
    }
    
    .el-input-number {
      .el-input__inner {
        border-radius: 8px;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        
        &:focus {
          border-color: #667eea;
          box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
          background: white;
        }
        
        &:hover {
          border-color: #667eea;
          background: white;
        }
      }
      
      .el-input-number__decrease,
      .el-input-number__increase {
        background-color: rgba(102, 126, 234, 0.1);
        border-color: rgba(102, 126, 234, 0.2);
        color: #667eea;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #667eea;
          border-color: #667eea;
          color: #fff;
        }
        
        &.is-disabled {
          background-color: #f5f7fa;
          border-color: #e4e7ed;
          color: #c0c4cc;
        }
      }
    }
  }
}

/* 特殊板块颜色 */
.statistics-section:nth-child(1) .section-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.statistics-section:nth-child(2) .section-header {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.statistics-section:nth-child(3) .section-header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.fee-price-card {
  margin-top: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
  }

  .el-card__header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 24px;
  }

  .card-header {
    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;

      .title-section {
        display: flex;
        align-items: center;
        gap: 12px;

        .warning-icon {
          font-size: 20px;
          color: #ff6b6b;
          animation: pulse 2s infinite;
        }

        .title-text {
          font-size: 18px;
          font-weight: 700;
          color: #2c3e50;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;

        .date-range-info {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 20px;
          color: white;
          font-size: 14px;
          font-weight: 500;
          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

          i {
            font-size: 16px;
          }
        }

        .collapse-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid rgba(102, 126, 234, 0.2);
          border-radius: 50%;
          color: #667eea;
          font-size: 16px;
          transition: all 0.3s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

          &:hover {
            background: #667eea;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
          }

          &.collapsed {
            transform: rotate(180deg);
          }

          i {
            transition: transform 0.3s ease;
          }
        }
      }
    }
  }

  .el-card__body {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 24px;
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;

    i {
      font-size: 32px;
      color: #667eea;
      animation: spin 1s linear infinite;
    }

    span {
      font-size: 16px;
      color: #606266;
      font-weight: 500;
    }
  }

  .fee-table-container {
    .carrier-section {
      margin-bottom: 24px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.8);
      overflow: hidden;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      .carrier-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }

        .carrier-info {
          display: flex;
          align-items: center;
          gap: 12px;

          i {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
          }

          .carrier-name {
            font-size: 16px;
            font-weight: 600;
            color: white;
          }
        }

        .carrier-actions {
          display: flex;
          align-items: center;
          gap: 12px;

          .record-count {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
          }

          .collapse-icon {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease;
          }
        }
      }

      .carrier-content {
        padding: 20px;
        background: white;

        .fee-table {
          .volume-text, .region-text, .price-text {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
          }

          .price-text {
            color: #67c23a;
            font-weight: 700;
          }

          .no-price {
            color: #909399;
            font-weight: 500;
          }
        }
      }
    }
  }

  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;

    i {
      font-size: 32px;
      color: #606266;
    }

    span {
      font-size: 16px;
      color: #909399;
      font-weight: 500;
    }
  }
}

.custom-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

  /* 表头样式 */
  ::v-deep .el-table__header-wrapper {
    background-color: #f5f7fa;
  }

  ::v-deep .el-table__header th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
    height: 50px;
    padding: 8px 0;
  }

  /* 表格主体样式 */
  ::v-deep .el-table__body td {
    padding: 12px 0;
  }

  /* 移除边框 */
  ::v-deep .el-table--border,
  ::v-deep .el-table--group {
    border: none;
  }

  ::v-deep .el-table--border::after,
  ::v-deep .el-table--group::after {
    display: none;
  }

  ::v-deep .el-table__fixed-right::before,
  ::v-deep .el-table__fixed::before {
    display: none;
  }

  /* 悬停效果 */
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #f5f7fa;
  }

  .volume-text, .region-text, .price-text, .time-text {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
  }

  .price-text {
    color: #67c23a;
    font-weight: 700;
  }
}

/* 动画效果 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>
